<template>
	<sw-common-frame :loading="loading">
		<template slot="button">
			<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
		</template>
		<template slot="table">
			<el-table :data="tableListData" v-bind="tableConfig">
				<el-table-column label="标签名称" min-width="300" show-overflow-tooltip>
					<template slot-scope="{ row }">
						<span class="label_name" @click="handleLabelClick($event, row)">{{ row.name }}</span>
					</template>
				</el-table-column>
				<el-table-column label="标签文件" min-width="120">
					<template slot-scope="{ row }">
						<el-button size="medium" type="text" icon="el-icon-file-count" @click="handleSearchResource(row)">标签文件 {{ row.amount }} 个</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="createName" label="创建人" min-width="120" />
				<el-table-column prop="createTime" label="创建时间" min-width="160" />
				<el-table-column label="操作" width="176" align="right" header-align="left">
					<template slot-scope="{ row }">
						<el-button size="medium" type="text" @click="handleAddChildren(row)">添加子级</el-button>
						<el-button size="medium" type="text" @click="handleDeleteLabel(row)">删除</el-button>
						<el-dropdown size="medium" class="dropdown" trigger="click" @command="handleUserCommand($event, row)">
							<el-button size="medium" type="text">
								更多
								<i class="el-icon-arrow-down"></i>
							</el-button>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="moveOut">移出</el-dropdown-item>
								<el-dropdown-item command="moveTo">移动到</el-dropdown-item>
								<el-dropdown-item command="copyTo">复制到</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<form-dialog v-model="formDialog" :data-id="dataId" :list="tableListData" :is-sub.sync="isChildren" @refresh="refreshTableData"></form-dialog>
	</sw-common-frame>
</template>

<script>
import lodash from 'lodash';
import formDialog from './form';
import listMixins from '@/mixins/listMixins';
import { getLabelTreeList, deleteLabelTree } from '@/api/data/tbSysLabelTree';
export default {
	mixins: [listMixins],
	components: { formDialog },
	data() {
		return {
			pageName: '标签树',
			isChildren: false,
			tableConfig: {
				lazy: true,
				ref: 'table',
				rowKey: 'id',
				size: 'medium',
				height: '100%',
				defaultExpandAll: true,
				class: 'label_table_wrapper',
				treeProps: { children: 'children', hasChildren: 'hasChildren' }
			},
			requestParams: { pid: 0 },
			labelFlatData: [],
			handleData: new Map()
		};
	},
	computed: {
		listFunction() {
			return eval(getLabelTreeList);
		},
		deleteFunction() {
			return eval(deleteLabelTree);
		},
		tableListData() {
			return this.$flatToTree(this.labelFlatData, 'pid');
		}
	},
	watch: {
		tableData(datas) {
			this.getChildrenData(datas);
		}
	},
	methods: {
		getChildrenData(arr) {
			let notChild = arr.filter((item) => Number(item.sonCount) === 0);
			let hasChild = arr.filter((item) => Number(item.sonCount) > 0);
			if (hasChild.length > 0) {
				let childPromise = hasChild.map((item) => {
					this.requestParams = { pid: item.id };
					return this.getTableData();
				});
				Promise.all(childPromise).then((res) => {
					let dataArr = lodash.flattenDeep(res);
					this.getChildrenData(dataArr);
				});
			}
			this.labelFlatData = [...this.labelFlatData, ...arr];
		},

		handleLabelClick(event, data) {
			if (Number(data.sonCount) === 0) return false;
			event.target.previousElementSibling.click();
		},

		handleAddChildren(data) {
			this.dataId = data.id;
			this.formDialog = true;
			this.isChildren = true;
		},

		//刷新数据
		refreshTableData(id) {
			let { tree, treeNode, resolve } = this.handleData.get(id);
			this.handleLoadData(tree, treeNode, resolve);
		},

		handleSearchResource(data) {
			if (Number(data.amount) > 0) {
				this.$router.push({
					path: '/search/allsearch',
					query: { field: '3', type: 'query_string', value: data.name }
				});
			} else {
				this.$message.warning('暂无该标签对应的资源');
			}
		},

		//删除数据
		handleDeleteLabel(data) {
			this.requestParams = { pid: '0' };
			this.handleDeleteData(data, () => {
				this.labelFlatData = [];
			});
		},

		handleUserCommand(command, data) {
			if (command === 'moveOut') {
			} else if (command === 'moveTo') {
			} else if (command === 'copyTo') {
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.label_table_wrapper {
	.label_name {
		font-size: 15px;
		cursor: pointer;
	}
}
</style>
